<template>
  <van-empty image="error" :description="message" image-size="250" />
</template>

<script setup>
// ------------------------------------- 导入模块 ---------------------------------
// 导入 vue 3 的 API
import { ref, toRefs } from 'vue'
// 导入 useRouter 操作路由模块
import { useRouter } from 'vue-router'

// 导入 vant 组件，按需引入
import {
  Empty as VanEmpty
} from 'vant'

// ------------------------------------- 声明数据 ---------------------------------
// 接收父组件传递的数据
const props = defineProps({
  errorMessage: {
    type: String,
    required: true
  }
})

const { errorMessage } = toRefs(props) // 获取路由中的错误信息
const router = useRouter()// 初始化路由实例
const message = ref(`${errorMessage.value}3s 后将跳转到首页`) // 渲染在页面上的错误信息
let index = 3 // 倒计时计时器

// ------------------------------------- 数据操作 ---------------------------------
// 设计一个定时器，让页面显示更加友好
const timer = setInterval(() => {
  index-- // 每次让计时器 --
  if (index === 0) {
    clearInterval(timer) // 清除定时器
    router.push('/') // 路由跳转，跳转到首页
  }
  // 更改页面提示信息
  message.value = errorMessage.value + `${index}s 后将跳转到首页`
}, 1000)
</script>

<style lang="scss" scoped>
// 页面空状态组件样式
.van-empty {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  .van-empty__image {
    width: 200px;
    height: 200px;
  }

  .van-empty__description {
    font-size: 50px;
  }
}

</style>
